<template>
  <el-dialog
    v-model="improveInformationDialog.visible"
    title="完善信息"
    width="1000px"
    class="system"
    close-icon="CloseBold"
    @close="closeDialog"
  >
    <el-form ref="corpFormRef" :model="corpForm" :rules="rules" label-width="120px">
      <el-row justify="start">
        <el-col :span="itemSpan">
          <el-form-item label="企业名称" prop="name">
            <el-input v-model="corpForm.name" :disabled="true" placeholder="请输入企业名称" class="input300" />
          </el-form-item>
        </el-col>
        <el-col :span="itemSpan">
          <el-form-item label="企业信用代码" prop="code">
            <el-input v-model="corpForm.code" :disabled="true" placeholder="请输入企业信用代码" class="input300" />
          </el-form-item>
        </el-col>
        <el-col :span="itemSpan">
          <el-form-item label="企业注册地" prop="areaCode">
            <el-cascader
              v-model="corpForm.areaCode"
              placeholder="请选择"
              :options="areaoptions"
              @change="handleCascaderChange"
            />
          </el-form-item>
        </el-col>
        <el-col :span="itemSpan">
          <el-form-item label="法人姓名" prop="legalman">
            <el-input v-model="corpForm.legalman" placeholder="请输入法人姓名" class="input300" />
          </el-form-item>
        </el-col>
        <el-col :span="itemSpan">
          <el-form-item label="法人身份证号码" prop="legalCardno">
            <el-input v-model="corpForm.legalCardno" placeholder="请输入法人身份证号码" class="input300" />
          </el-form-item>
        </el-col>
        <el-col :span="itemSpan">
          <el-form-item label="法人手机号码" prop="legalMobile">
            <el-input v-model="corpForm.legalMobile" placeholder="请输入法人手机号码" class="input300" />
          </el-form-item>
        </el-col>
        <el-col :span="itemSpan">
          <el-form-item label="企业注册日期" prop="registerDate">
            <el-date-picker
              v-model="corpForm.registerDate"
              type="date"
              placeholder="选择企业注册日期"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              class="date-picker"
            />
          </el-form-item>
        </el-col>
        <el-col :span="itemSpan">
          <el-form-item label="联系人" prop="linkMan">
            <el-input v-model="corpForm.linkMan" placeholder="请输入联系人" class="input300" />
          </el-form-item>
        </el-col>
        <el-col :span="itemSpan">
          <el-form-item label="联系人电话" prop="linkTel">
            <el-input v-model="corpForm.linkTel" placeholder="请输入联系人电话" class="input300" />
          </el-form-item>
        </el-col>
        <el-col :span="23">
          <el-form-item label="注册地址" prop="regAddr">
            <el-input v-model="corpForm.regAddr" placeholder="请输入注册地址" />
          </el-form-item>
        </el-col>
        <el-col :span="23">
          <el-form-item label="办公地址" prop="officeAddr">
            <el-input v-model="corpForm.officeAddr" placeholder="请输入办公地址" />
          </el-form-item>
        </el-col>
        <el-col :span="itemSpan">
          <el-form-item label="经济类型" prop="economicType">
            <el-select v-model="corpForm.economicType" placeholder="请选择经济类型" clearable>
              <el-option
                v-for="item in economicTypeoptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="itemSpan">
          <el-form-item label="法人职务" prop="legalTitle">
            <el-select v-model="corpForm.legalTitle" placeholder="请选择法人职务" clearable filterable>
              <el-option v-for="item in legalTitles" :key="item.label" :label="item.label" :value="item.label" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="itemSpan">
          <el-form-item label="法人职称" prop="legalDuty">
            <el-select v-model="corpForm.legalDuty" placeholder="请选择法人职称" clearable>
              <el-option v-for="item in legalDutys" :key="item.label" :label="item.label" :value="item.label" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="itemSpan">
          <el-form-item label="注册资本" prop="regCapital">
            <!-- <el-input v-model="corpForm.regCapital" placeholder="请输入注册资本" class="input300" /> -->
            <money-input v-model="corpForm.regCapital" unit="万元" class="input300"></money-input>
          </el-form-item>
        </el-col>
        <el-col :span="itemSpan">
          <el-form-item label="邮编" prop="zipCode">
            <el-input v-model="corpForm.zipCode" placeholder="请输入邮编" class="input300" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-col :span="24">
        <el-form-item label="上传营业执照、资质证书" prop="attachments">
          <el-upload
            v-model:file-list="fileList"
            :action="actionUrl"
            multiple
            :limit="5"
            accept=".doc,.docx,.pdf,.jpg,.png,.xls,.xlsx"
            :on-exceed="handleUploadExceed"
            :on-success="handleUploadSuccess"
            :on-preview="handleUploadPreview"
          >
            <el-button plain size="small">上传附件</el-button>
            <template #tip>
              <div class="el-upload__tip">仅支持上传doc,docx,xls,xlsx,pdf,jpg,png且不大于5M的文件</div>
            </template>
          </el-upload>
        </el-form-item>
      </el-col>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" :loading="loading" @click="handleSubmit">确 定</el-button>
        <el-button @click="closeDialog()">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { downloadFile } from "@/utils";
import { downloadAttachment } from "@/api/common/other/index";
import { CorpForm } from "@/api/account/corp/types";
import MoneyInput from "@/components/MoneyInput/index.vue";
import { getCorp, updateCorp } from "@/api/account/corp/index";
import { getDicts } from "@/store/modules/dict";
import type { FormRules, UploadUserFile } from "element-plus";
import { rmSync } from "fs";
const fileList = ref<UploadUserFile[]>([]);
const actionUrl = ref(`${import.meta.env.VITE_APP_BASE_API}/api/v1/common/upload`);
const itemSpan = ref(8);
const corpForm = reactive<CorpForm>({});
// const corpForm = ref(reactive<CorpForm>)
const corpFormRef = ref(ElForm); // 表单/清空重置使用
const validatorAttachment = function (rule: any, value: any, callback: any) {
  if (fileList.value.length == 0) {
    callback(new Error("请上传营业执照、资质证书!"));
    return;
  } else {
    callback();
  }
};
const rules = reactive<FormRules<CorpForm>>({
  name: [{ required: true, message: "企业名称不能为空", trigger: "blur" }],
  password: [{ required: true, message: "登录密码不能为空", trigger: "blur" }],
  provinceCode: [{ required: true, message: "归属省不能为空", trigger: "blur" }],
  cityCode: [{ required: true, message: "归属地市不能为空", trigger: "blur" }],
  areaCode: [{ required: true, message: "归属区县不能为空", trigger: "blur" }],
  regAddr: [{ required: true, message: "注册地址不能为空", trigger: "blur" }],
  legalman: [{ required: true, message: "法人姓名不能为空", trigger: "blur" }],
  legalDuty: [{ required: true, message: "法人职称不能为空", trigger: "blur" }],
  officeAddr: [{ required: true, message: "办公地址不能为空", trigger: "blur" }],
  economicType: [{ required: true, message: "请选择经济类型", trigger: "blur" }],
  legalCardno: [
    { required: true, message: "法人身份证号码不能为空", trigger: "blur" },
    {
      pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
      message: "请输入正确的身份证号码",
      trigger: "blur",
    },
  ],
  legalMobile: [
    { required: true, message: "法人手机号码不能为空", trigger: "blur" },
    {
      pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
      message: "请输入正确的手机号码",
      trigger: "blur",
    },
  ],
  registerDate: [{ required: true, message: "企业注册日期不能为空", trigger: "blur" }],
  linkMan: [{ required: true, message: "联系人不能为空", trigger: "blur" }],
  legalTitle: [{ required: true, message: "法人职务不能为空", trigger: "blur" }],
  linkTel: [
    { required: true, message: "联系人电话不能为空", trigger: "blur" },
    {
      pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
      message: "请输入正确的手机号码",
      trigger: "blur",
    },
  ],

  attachments: [
    {
      required: true,
      message: "请上传营业执照、资质证书",
      trigger: "blur",
      validator: validatorAttachment,
    },
  ],
});
const loading = ref(false);
const areaoptions = getDicts("areaTrees");
const economicTypeoptions = getDicts("corpEconomicTypes");
const legalDutys = getDicts("legalManTitleTypes");
const legalTitles = getDicts("legalManDutyTypes");

const props = defineProps({
  improveInformationDialog: {
    type: Object,
    default: () => ({
      visible: false,
    }),
  },
});
let { improveInformationDialog } = toRefs(props);

const emit = defineEmits(["sendClose"]);

/* 附件上传 */
const download = (id: string) => {
  downloadAttachment(id).then((res) => {
    downloadFile(res);
  });
};
const handleUploadPreview = (file: any) => {
  if (file.status == "success") {
    if (file.response) {
      console.log(file);
      ElMessage.info("新上传文件：" + file.name);
    } else {
      download(file.uid);
    }
  } else {
    console.log(file);
    ElMessage.error("附件下载失败");
  }
};
const handleUploadExceed = () => {
  ElMessage.error("最多上传5个附件");
};
const handleUploadSuccess = (response: any) => {
  if (response.type === 0) {
    if (response.success) {
    } else {
      ElMessage.error(response.msg);
    }
  } else {
    ElMessage.error(response.msg);
  }
};

/**
 * 关闭弹窗
 */
function closeDialog() {
  emit("sendClose");
}

const handleCascaderChange = (value: any) => {
  if (value.length == 3) {
    corpForm.provinceCode = value[0];
    corpForm.cityCode = value[1];
    corpForm.areaCode = value[2];
  }
  // 在这里可以对选中的值进行进一步处理
};

//提交数据
function handleSubmit() {
 
}

function initData() {
 
}
onMounted(() => {
  initData();
});
</script>

<style lang="scss" scoped></style>
